<template>
  <div class="order-contain">
    <van-tabs v-model="active">
      <van-tab title="全部">
        <order :orderList="allOrderList" @cancel="cancel" @delOrder="delOrder" @sendGoods="sendGoods"></order>
      </van-tab>
      <van-tab title="未付款">
        <order :orderList="notPayOrderList" @cancel="cancel"></order>
      </van-tab>
      <van-tab title="已付款">
        <order :orderList="payOrderList" @sendGoods="sendGoods"></order>
      </van-tab>
      <van-tab title="完成">
        <order :orderList="finishOrderList"></order>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getuserOrder, cancelOrder, delOrder } from "@/api";
import order from "@/component/Orders.vue";
export default {
  components: {
    order,
  },
  data() {
    return {
      active: 0,
      allOrderList: [],
      notPayOrderList: [],
      payOrderList: [],
      finishOrderList: [],
    };
  },
  methods: {
    // 获取所有用户订单
    async getUserOrder() {
      let data = await getuserOrder();
      this.allOrderList = data;
      data.forEach((item) => {
        // 未付款的订单
        if (item.status == 0) {
          this.notPayOrderList.push(item);
        }
        // 已付款的订单
        if (item.status == 1) {
          this.payOrderList.push(item);
        }
        // 完成的订单
        if (item.is_finish == 1) {
          this.finishOrderList.push(item);
        }
      });
    },
    // 取消订单
    async cancel(id) {
      this.$dialog
        .confirm({
          message: "确认要取消订单吗？",
        })
        .then(async () => {
          await cancelOrder(id);
          this.allOrderList = [];
          this.notPayOrderList = [];
          this.payOrderList = [];
          this.finishOrderList = [];
          this.getUserOrder();
        })
        .catch(() => {});
    },
    // 删除订单
    async delOrder(id) {
      this.$dialog
        .confirm({
          message: "确认要删除订单吗？",
        })
        .then(async () => {
          let data = await delOrder(id);
          let { message } = data;
          this.$toast(message);
          this.allOrderList = [];
          this.notPayOrderList = [];
          this.payOrderList = [];
          this.finishOrderList = [];
          this.getUserOrder();
        })
        .catch(() => {});
    },
    sendGoods() {
      this.$toast("已提醒商家");
    },
  },
  async mounted() {
    this.getUserOrder();
  },
};
</script>

<style lang="scss" scoped>
.order-contain {
  .order {
    padding: 10px 15px;
    margin: 10px 0;
    // max-height: 165px;
    background: #fff;

    .van-divider {
      margin: 7px 0;
    }

    .goods {
      display: flex;
      justify-content: space-between;
      height: 88px;

      img {
        width: 88px;
        height: 88px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        font-size: 12px;

        .price {
          font-size: 16px;
        }
      }
    }

    .footer {
      .text {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 12px;
      }

      .btn {
        display: flex;
        flex-direction: row-reverse;

        .van-tag {
          padding: 4px 2px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
